歌手主页1 核心布局，组件基石|云音乐项目 | 前端进阶之旅

本节代码对应 GitHub 分支: chapter7

# 改造路由

第一步当然是路由的准备工作。

在 routes/index.js 中，添加如下：

import Singer from '../application/Singer';

//...
{
  path: "/singers",
  component: Singers,
  key: "singers",
  routes: [
    {
      path: "/singers/:id",
      component: Singer
    }
  ]
}

@前端进阶之旅: 代码已经复制到剪贴板

当然，我们需要新建 Singer 文件夹，其中的 index.js 如下：

import React from 'react';

function Singer (props) {
  return (
    <div>Singer</div>
  )
}

export default Singer;

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们需要在以前的歌手列表组件中添加以下跳转逻辑：

const enterDetail = (id)  => {
  props.history.push (`/singers/${id}`);
};

//...
<ListItem key={item.accountId+""+index} onClick={() => enterDetail (item.id)}>

@前端进阶之旅: 代码已经复制到剪贴板

当然，不要忘了这一句，否则作为子路由下的 Singer 组件无法渲染:

//Singers/index.js
import { renderRoutes } from 'react-router-config';

//...
return (
  <div>
    //...
    { renderRoutes (props.route.routes) }
  </div>
)

@前端进阶之旅: 代码已经复制到剪贴板

# 路由跳转动画

由于之前详细拆解过，这里就不着重介绍了。

仍然是利用 react-transition-group。

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import { Container } from "./style";

function Singer (props) {
  const [showStatus, setShowStatus] = useState (true);

  return (
    <CSSTransition
      in={showStatus}
      timeout={300}
      classNames="fly"
      appear={true}
      unmountOnExit
      onExited={() => props.history.goBack ()}
    >
      <Container>
      </Container>
    </CSSTransition>
  )
}

export default Singer;